import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      // text: '数据统计',
      left: 'center'
    },
    
    color: ["#3399FF"],
    legend: {
      data: ['A','B'],
      top: 20,
      left: 'center',
      backgroundColor: '#dbdbdb',
      z: 100
    },
    grid: {
        left: 0,//折线图距离左边距
        right: 30,//折线图距离右边距
        top: 30,//折线图距离上边距
        bottom: 10,
        containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    

    xAxis: {
      name: '时刻',
      type: 'time',
      boundaryGap:false,
      
      
      axisLabel: {
        //横坐标最后的标注颜色变深
        // interval: 0,
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    yAxis: {
      name: 'D0-1',
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'solid'
        }
      },
      //设置y轴字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: false,
      data: [
        ['2024-09-30 17:43:59',0],
        ['2024-09-30 17:44',1],
        ['2024-09-30 17:44:30',0],
        ['2024-09-30 17:47',0],
        ['2024-09-30 17:49',0],
        ['2024-09-30 17:50',0],
        ['2024-09-30 17:52',0],
        ['2024-09-30 17:54',0],
        ['2024-09-30 17:56:59',0],
        ['2024-09-30 17:57',1],
        ['2024-09-30 18:00',1],
        ['2024-09-30 18:02',1],
        ['2024-09-30 18:04',1],
        ['2024-09-30 18:06',1],
        ['2024-09-30 18:08',1],
        ['2024-09-30 18:09',1],
        ['2024-09-30 18:10',1],
        ['2024-09-30 18:12',1],
        ['2024-09-30 18:13',1]]
    }],
  
  };
  chart.setOption(option);
  return chart;
}


Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart,
      select:''
    },
    tabList: [
      { title: "设备概况", index: "0" },
      { title: "报警记录", index: "1" },
      { title: "历史数据", index: "2" },
      { title: "视频监控", index: "3" },
      { title: "定位轨迹", index: "4" },
    ],
    tabsId: 0, //默认选型为装备
    dataList: [], // 列表数据
    page: 1, // 当前页数
    pageSize: 10, // 每页数据条数
    loading: false ,// 加载状态标识
    timeRangeIndex: 0,
    timeRange: ['最近60分钟', '4小时内', '24小时内'],
    date: '2024-01-01', //默认起始时间
    date2: '2024-01-24', //默认结束时间
    animate: 'myfirst',
    yesorno: 'none',
    flag: true,
    test: 'test1',
    category: '', // 保存当前选中的类别
    feature: '', // 保存当前选中的特色
        // 模拟列表数据
        dataList0: [
          { value: '数值1', updateTime: '2024-01-01 08:00' },
          { value: '数值2', updateTime: '2024-01-01 09:00' },
          { value: '数值3', updateTime: '2024-01-01 10:00' },
          { value: '数值4', updateTime: '2024-01-01 10:00' },
          // 添加更多数据...
        ],
    content:[
      {"name":"DO1","time":"2024.3.18 10:20:56"},
      {"name":"DO2","time":"2024.3.18 10:20:56"},
      {"name":"DO3","time":"2024.3.18 10:20:56"},
      {"name":"AT1","time":"2024.3.18 10:20:56"},
      {"name":"AT2","time":"2024.3.18 10:20:56"},
      {"name":"AT3","time":"2024.3.18 10:20:56"},
      {"name":"AT4","time":"2024.3.18 10:20:56"},
      {"name":"AS1","time":"2024.3.18 10:20:56"}
    ],
    src:"http://localhost:3000/1.mp4",
  },
  hand:function(event){
    const select = event.detail.value;
    this.setData({
      select:select
    })
  },
  onReady() {
    const list = {
      // 表格标题
      th: ["变量值", "更新时间"],
      // 表格内容  这里只能使用 数组套数组格式
      td:
      [
        [0,'2024-09-30 17:43'],
        [1,'2024-09-30 17:44'],
        [0,'2024-09-30 17:44'],
        [0,'2024-09-30 17:47'],
        [0,'2024-09-30 17:49'],
        [0,'2024-09-30 17:50'],
        [0,'2024-09-30 17:52'],
        [0,'2024-09-30 17:54'],
        [0,'2024-09-30 17:56'],
        [1,'2024-09-30 17:57'],
        [1,'2024-09-30 18:00'],
        [1,'2024-09-30 18:02'],
        [1,'2024-09-30 18:04'],
        [1,'2024-09-30 18:06'],
        [1,'2024-09-30 18:08'],
        [1,'2024-09-30 18:09'],
        [1,'2024-09-30 18:10'],
        [1,'2024-09-30 18:12'],
        [1,'2024-09-30 18:13']],
    }
    this.setData({
      list
    })
  },
  onLoad: function (options) {
    
  },
  click: function (e) { 
    console.log("按了：", e.currentTarget.id)
  },
  slideOn(e) {
    this.setData({
      tabsId: e.detail.current
    });
  },
  toPosition:function(e){
    var that = this;
    wx.chooseLocation({
      success: function (lb) {},
      complete: function (lb) {
        that.setData({
          houseAddress:lb.name
        })
      },
      cancel: function (lb) {
      },
      fail: function (lb) {
        console.log(lb)
      }
    })
  },

  tabsOn(e) {
    this.setData({
      tabsId: e.currentTarget.dataset.idx
    });
  },
 
  onPullDownRefresh: function () {
    // 下拉刷新时重新请求数据
    wx.request({
      url: 'http://192.168.245.55:3000/selectById1/data',
      success: (res) => {
        this.setData({
          dataList: res.data
        });
        wx.stopPullDownRefresh(); // 停止下拉刷新动画
      }
    });
},
onLoad: function () {
  // 页面加载时加载数据
  this.loadData();
},


loadData: function () {
  // 模拟异步加载数据
  // 这里可以是请求后端接口获取数据的逻辑
  let that = this;
  wx.request({
      url: 'http://192.168.245.55:3000/api1/data',
      method: 'GET',
      data: {
          page: that.data.page,
          pageSize: that.data.pageSize
      },
      success: function (res) {
          let newData = res.data; // 新加载的数据
          that.setData({
              dataList: that.data.dataList.concat(newData),
              page: that.data.page + 1,
              loading: false
          });
      }
  });
},

loadMore: function () {
  // 触发加载更多数据
  if (!this.data.loading) {
      this.setData({
          loading: true
      });
      this.loadData();
  }
},

handleCategoryClick(e) {
  const category = e.currentTarget.dataset.category;
  this.setData({
    category
  });
},

handleFeatureClick(e) {
  const feature = e.currentTarget.dataset.feature;
  this.setData({
    feature
  });
},

clearSelection() {
  this.setData({
    category: '',
    feature: ''
  });
},

fabiao: function () {
  this.setData({
    yesorno: 'block',
    test: 'test1',
    flag: false
  });
},

laqi: function () {
  this.setData({
    test: 'test2',
    flag: true
  });
},

bindTimeRangeChange: function (e) {
  this.setData({
    timeRangeIndex: e.detail.value
  });
},

bindDateChange(e) {
  this.setData({
    date: e.detail.value
  });
},

bindDateChange2(e) {
  this.setData({
    date2: e.detail.value
  });
},

onInput(e) {
  this.setData({
    keyword: e.detail.value
  });
  this.filterList();
},

goToDetail: function(event) {
  const id = event.currentTarget.dataset.id;
  wx.navigateTo({
    url: '/pages/warnDetail/warnDetail?id=' + id,
    success: () => {
      // 在成功跳转后再设置dataList的值
      wx.request({
        url: 'http://192.168.245.55:3000/selectById1/data',
        success: (res) => {
          this.setData({
            dataList1: res.data
          });
        }
      });
    }
  });
},
onReady() {
  wx.request({
    url: 'http://192.168.245.55:3000/selectById1/data',
    success: (res) => {
      this.setData({
        dataList1: res.data
      });
    }
  });
 
},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})